<template>
    <!--  -->
    <el-dialog v-model="show" title="烫金版状态信息" width="700" center align-center @close="handleClose">

        <div class="textFlex">
            <div class="textFlex_title">烫金版名称：</div>
            <div class="textFlex_content">{{ props.initList.gildingName || '' }}</div>
        </div>

        <div class="textFlex">
            <div class="textFlex_title">包含烫金片数：</div>
            <div class="textFlex_content">{{ props.initList.fileNumber || '' }}</div>
        </div>

        <div class="textFlex">
            <div class="textFlex_title">当前状态：</div>
            <div class="textFlex_content">{{ props.initList.useStatus == 1 ? '在库中' : '使用中' }}</div>
        </div>

        <template v-if="props.initList.useStatus == 1">
            <div class="textFlex">
                <div class="textFlex_title">归还库位：</div>
                <div class="textFlex_content">{{ props.initList.warehouseLocation || '' }}</div>
            </div>

            <div class="textFlex">
                <div class="textFlex_title">归还人：</div>
                <div class="textFlex_content">{{ props.initList.returnPersonName || '' }}</div>
            </div>

            <div class="textFlex">
                <div class="textFlex_title">归还时间：</div>
                <div class="textFlex_content">{{ props.initList.returnDate || '' }}</div>
            </div>
        </template>

        <template v-else>
            <div class="textFlex">
                <div class="textFlex_title">领用人：</div>
                <div class="textFlex_content">{{ props.initList.lastPersonName || '' }}</div>
            </div>

            <div class="textFlex">
                <div class="textFlex_title">领用时间：</div>
                <div class="textFlex_content">{{ props.initList.lastDate || '' }}</div>
            </div>
        </template>



        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>

                <el-button type="primary" @click="handleSubmit()">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['close', 'submit']);
const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
}, { deep: true });

const handleClose = () => {
    emits('close');
};

const handleSubmit = async () => {
    proxy?.$modal.msgSuccess('操作成功');
    emits('submit', false);
};


onMounted(() => {
})
</script>

<style lang="scss" scoped>
.textFlex {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 18px;
    padding-left: 20px;

    &_title {
        width: 130px;
        font-weight: bold;
        text-align: right;
    }

    &_list {
        display: flex;

        img {
            width: 150px;
            height: 60px;
            margin-right: 10px;
        }
    }

    &_blue {
        color: #69AFF0;
    }

    &_green {
        color: #68C23D;
    }
}
</style>